<template>
    <div class="event-wrapper">
        <DataGrid :auto-load="autoLoad" ref="dataGridRef">
            <template #toolbar-search>
                <div class="query-from-box">
                    <el-form>
                        <el-form-item>
                            <el-input v-model="queryData.actionKey" placeholder="事件名称/标识符" clearable />
                        </el-form-item>
                        <el-form-item>
                            <el-select placeholder="事件类型" v-model="queryData.eventType" clearable>
                                <el-option
                                    v-for="(value, key) in thingEventType"
                                    :label="value"
                                    :key="key"
                                    :value="key"
                                />
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
            </template>
            <template #toolbar-operation>
                <el-button type="primary" @click="onHistory">历史</el-button>
            </template>
            <el-table-column type="index" label="序号" width="60" align="center" fixed />
            <el-table-column label="事件名称" width="300" fixed show-overflow-tooltip>
                <template #default="scope">
                    <el-button link type="primary" @click="onViewItem(scope.row)">
                        {{ scope.row.displayName }}
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column prop="eventName" label="标识符" show-overflow-tooltip />
            <el-table-column label="事件类型" show-overflow-tooltip>
                <template #default="scope">
                    {{ thingEventType[scope.row.eventType] }}
                </template>
            </el-table-column>
            <el-table-column prop="output" label="输出" />
            <el-table-column prop="updateTime" label="最新更新时间" show-overflow-tooltip />
        </DataGrid>
    </div>
</template>
<script setup lang="ts">
import { IoTDeviceService, modelService } from '@great/services';
import { showPopupBox, tryJsonParse } from '@great/utils';
import { DataGrid, type DataGridInstance } from '@great/components';
import { thingEventType } from '@/utils/constant';
import EventHistoryModal from './EventHistoryModal.vue';
import EventFormModal from '@/pages/model/thing/components/detail/thingModel/components/EventFormModal.vue';

const props = defineProps<{
    detailData?: Record<string, any>;
}>();

// 查询条件
const queryData = ref({
    proDeviceNo: props.detailData?.deviceNo,
    productObject: props.detailData?.objectName,
    actionKey: '',
    eventType: ''
});
const dataGridRef = useTemplateRef<DataGridInstance>('dataGridRef');
const autoLoad = reactive({
    debounce: true,
    reloadDeps: [queryData],
    onLoad: async (current, size) => {
        const res = await IoTDeviceService.getEventPage({
            current,
            size,
            ...queryData.value
        });
        return { data: res.data.records, total: res.data.total };
    }
});
// 查看详情
const onViewItem = async (row: { id: string }) => {
    let requests: Array<any> = [];
    let detailRequest = await modelService.event.getDetail(row.id);
    requests.push(detailRequest);
    let attributeRequest = modelService.attribute.getTypeList();
    requests.push(attributeRequest);
    await Promise.all(requests);
    let detail = await detailRequest;
    let attribute = await attributeRequest;
    // 打开弹框
    showPopupBox(EventFormModal, {
        readOnly: true,
        detail: detail.data,
        modelDetail: {
            objectName: detail.data.objectName
        },
        attributeTypeList: attribute.data
    });
};
// 历史
const onHistory = () => {
    showPopupBox(EventHistoryModal, {
        deviceDetail: props.detailData as Record<string, any>
    });
};
</script>

<style scoped lang="scss">
.event-wrapper {
    .query-from-box {
        display: flex;
        align-items: center;
        .el-form {
            display: flex;
            .el-form-item {
                margin-bottom: 0;
                width: 192px;
            }
            .el-form-item + .el-form-item {
                margin-left: 10px;
            }
        }
    }
    :deep(.data-grid) {
        .table-item-tag {
            display: flex;
        }
    }
}
</style>
